import Slardar from '@apmplus/web'
import { Card } from 'antd'
import { render } from 'react-dom'

import { TriggerEvent } from './event'
import { TriggerIntegration } from './integrations'
import { TriggerPageview } from './pageview'

const $root = document.querySelector('#app')

const start = () => {
  Slardar.start()
}
const init = () => {
  Slardar('init', Cypress.env().config)
  Slardar('on', 'init', () => {
    Slardar.getSender()?.setSize(0)
    Slardar.getSender()?.setWait(0)
  })
}

const triggerCreateAndStart = () => {
  const newClient = Slardar.create!()
  newClient.init({
    aid: 666,
    token: '123',
    domain: 'cypress.test',
  })
  newClient.start()
}

const triggerCustomEvent = () => {
  Slardar('sendEvent', {
    name: 'custom-event',
    metrics: {
      a: 3,
    },
    categories: {
      b: '3',
    },
  })
}

const triggerCustomLog = () => {
  Slardar('sendLog', {
    content: 'custom-event',
    extra: {
      a: 3,
      b: '3',
    },
    level: 'error',
  })
}

const triggerCapture = () => {
  Slardar('captureException', new Error('manual captureException'), { extraKey: 'extra info' })
}

const triggerSenderSetSize = () => {
  Slardar('on', 'init', () => {
    Slardar.getSender()?.setSize(50)
    Slardar('sendEvent', {
      name: 'set-size',
      metrics: {
        size: Slardar.getSender()?.getSize() || 0,
      },
    })
  })
}

const triggerSenderSetWait = () => {
  Slardar('on', 'init', () => {
    Slardar.getSender()?.setWait(1000)
    Slardar('sendEvent', {
      name: 'set-wait',
      metrics: {
        wait: Slardar.getSender()?.getWait() || 0,
      },
    })
  })
}

const triggerCaptureErrorEvent = () => {
  window.addEventListener('error', (e) => {
    Slardar('captureException', e)
  })
  const a = undefined
  // @ts-expect-error
  a.b()
}

const triggerXHR2Filter = () => {
  Slardar('setFilter', 'xhr', ([, url]) => {
    if (url.includes('/oncollect/http')) return true
    return false
  })
}

const triggerFetchFilter = () => {
  Slardar('setFilter', 'fetch', ([, options]) => {
    if (options.body) return true
    return false
  })
}

const triggerErrorFilter = () => {
  Slardar('setFilter', 'err', () => false)
}

const App = () => {
  return (
    <div className="app">
      <Card>
        <h1>Slardar SDK</h1>
        <p>Testing by cypress</p>
        <button id="start" onClick={start}>
          Start
        </button>
        <button id="init" onClick={init}>
          Init
        </button>
        <TriggerEvent />
        <TriggerIntegration />
        <TriggerPageview />
        <button id="trigger-create-and-start" onClick={triggerCreateAndStart}>
          trigger-create-and-start
        </button>
        <button id="trigger-custom-event" onClick={triggerCustomEvent}>
          trigger-custom-event
        </button>
        <button id="trigger-custom-log" onClick={triggerCustomLog}>
          trigger-custom-log
        </button>
        <button id="trigger-capture" onClick={triggerCapture}>
          trigger-capture
        </button>
        <button id="trigger-capture-error-event" onClick={triggerCaptureErrorEvent}>
          trigger-capture-error-event
        </button>
        <button id="trigger-sender-setSize" onClick={triggerSenderSetSize}>
          trigger-sender-setSize
        </button>
        <button id="trigger-sender-setWait" onClick={triggerSenderSetWait}>
          trigger-sender-setWait
        </button>
        <button id="trigger-set-xhr-2-filter" onClick={triggerXHR2Filter}>
          trigger-set-xhr-2-filter
        </button>
        <button id="trigger-set-fetch-filter" onClick={triggerFetchFilter}>
          trigger-set-fetch-filter
        </button>
        <button id="trigger-set-error-filter" onClick={triggerErrorFilter}>
          trigger-set-error-filter
        </button>
      </Card>
    </div>
  )
}

render(<App />, $root!)
const delay = new URL(location.href).searchParams.get('delay')
if (!Cypress.env().doNotInit) {
  if (delay) {
    setTimeout(() => {
      Slardar('init', Cypress.env().config)
      Slardar('on', 'init', () => {
        Slardar?.getSender()?.setSize(0)
        Slardar?.getSender()?.setWait(0)
      })
    }, parseInt(delay))
  } else {
    Slardar('init', Cypress.env().config)
    Slardar('on', 'init', () => {
      Slardar?.getSender()?.setSize(0)
      Slardar?.getSender()?.setWait(0)
    })
  }
}
